<template>
  <el-container>
    <el-main :v-model="Merchant" :key="Merchant.id">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
      <span style="margin-left: 500px"
        ><h1>店铺：{{ Merchant.merchantName }}</h1></span
      >
      <!-- 店铺关注区域 -->
      <span style="margin-left: 700px"
        >店铺等级：{{ Merchant.levelId
        }}<el-button
          type="success"
          plain
          style="margin-left: 20px"
          @click="AddUserLikeMerchants"
          >关注店铺</el-button
        ></span
      >

      <div>
        <img
          src="https://gd1.alicdn.com/imgextra/i2/73036207/O1CN01ncQsbH1vir4KVKZ70_!!73036207.jpg_400x400.jpg"
          alt=""
          class="img2"
        />
        <div style="margin-bottom: 20px; margin-left: 120px">
          <img
            src="https://gd1.alicdn.com/imgextra/i1/219584853/TB2FjSrmthvOuFjSZFBXXcZgFXa_!!219584853.jpg_70x70.jpg_.webp"
            alt=""
            style="margin-left: 30px"
          />
          <img
            src="https://gd1.alicdn.com/imgextra/i1/219584853/O1CN01zhGrRf1liibwbgQs3_!!219584853.jpg_70x70.jpg_.webp"
            alt=""
            style="margin-left: 30px"
          />
          <img
            src="https://gd1.alicdn.com/imgextra/i1/219584853/O1CN01R2ZrTl1liibvJaxWJ_!!219584853.jpg_70x70.jpg_.webp"
            alt=""
            style="margin-left: 30px"
          />
        </div>

        <div :v-model="commodityAny" :key="commodityAny.id">
          <h4 class="title">
            {{ commodityAny.commodityName }}
          </h4>
          <h1 class="price">优惠价：{{ commodityAny.commodityMoney }}</h1>
          <h4 class="yprice">原价：{{ commodityAny.commodityMoney + 1000 }}</h4>
        </div>
        <div
          v-for="item in productValue"
          :key="item.index"
          style="margin: 0px; padding: 0px"
        >
          <span>
            <div style="margin-top: 1rem">
              <span
                style="font-size: 18px; font-weight: 600; margin-left: 650px"
              >
                {{ item[0].SpeName }}：

                <span v-for="a in item" :key="a.id">
                  <el-button
                    v-popover:popover
                    style="padding: 5px; margin-left: 10px"
                  >
                    {{ a.opention }}
                  </el-button>
                </span>
              </span>
            </div>
          </span>
        </div>
      </div>
      <div style="margin-left: 650px">
        <h4 class="num">数量</h4>
        <el-input-number
          v-model="num"
          @change="handleChange"
          :min="1"
          :max="10"
          label="描述文字"
          class="buynum"
        ></el-input-number>
        <el-button type="primary" plain class="buy">直接下单</el-button>
        <el-button type="primary" plain class="intocar">加入购物车</el-button>
      </div>

      <div>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          class="tab"
        >
          <!-- 商品详情 -->
          <el-tab-pane label="商品详情" name="first"
            >
            <div class="detail1">
              <img
                src="https://img.alicdn.com/imgextra/i1/1710936647/O1CN014VO3rV1yyNKq4rNWr_!!1710936647.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i2/1710936647/O1CN01qdaQ501yyNHnVsPpt_!!1710936647.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i1/1710936647/O1CN01Cx48JW1yyNLBr67Ru_!!1710936647.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i4/1710936647/O1CN01hhYDv41yyNLDGSKnC_!!1710936647.jpg"
                alt=""
              />
              <img
                src="https://gdp.alicdn.com/imgextra/i2/1710936647/O1CN01ik09i51yyNK3xlzD4_!!1710936647.jpg"
                alt=""
              />
            </div>
            <!-- 评价 -->
          </el-tab-pane>
          <el-tab-pane label="累计评价" name="second">累计评价</el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
  </el-container>
</template>

<script >
import { GetCommodityAny, GetMerchant, AddShoppingCar, GetSkuKey, GetSkuValue, AddUserLikeMerchant } from '../api/home'
export default {
  data () {
    return {
      commodityAny: [],
      Merchant: [],
      shoppingCar: [],
      commodityIdone: '',
      merchantid: '',
      mode: { commid: this.commodityIdone },
      productClass: [],
      productValue: [

      ],
      UserLikeMerchantone: [],
      commodityId: '',
      num: 1,
      value: "",
      activeName: "first",
    };
  },
  created () {
    this.commodityIdone = this.$route.params.id;
  },
  methods: {
    handleChange (value) {
      console.log(value);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    //关注店铺
    AddUserLikeMerchants () {
      this.UserLikeMerchantone.push({
        UsersId: parseInt(localStorage.getItem("Id")),
        MerchantAttentionId: this.merchantid
      })
      console.log(this.UserLikeMerchantone[0]);
      AddUserLikeMerchant(this.UserLikeMerchantone[0]).then(res => {
        console.log(res.data);
        if (res.data.code == 1000) {
          alert("关注成功")
        }
        else {
          alert("你已关注")
        }

      });


    },
    //获得sku
    GetAnySku () {
      GetSkuKey(this.commodityIdone).then(res => {
        this.productClass = res.data.data;
      })
    },
    //获得sku对应sku-value
    GetAnySkuValue () {
      GetSkuKey(this.commodityIdone).then(res1 => {
        this.productClass = res1.data.data;
        this.productClass.forEach(item => {
          this.productValue.push([{ SpeName: item.parameterName }])
          console.log(this.productValue);
          GetSkuValue(item.id - 1).then(res => {
            console.log(res.data.data);
            res.data.data.forEach(a => {
              this.productValue[item.id - 1].push({
                opention: a.parameterValue,
                id: a.id
              })
            })
          })
          console.log(this.productValue);
        });
      })

    },
    //购物车
    ShopCar () {
      AddShoppingCar().then()
    },
    // 根据店铺id获得店铺详细信息
    GetMerchants () {
      GetMerchant(this.merchantid).then(res => {
        this.Merchant = res.data.data[0];
      });
    },
    // 获得商品详细信息
    getCommodity () {

      GetCommodityAny(this.commodityIdone).then((res) => {
        this.commodityAny = res.data.data;
        this.merchantid = res.data.data.merchantId;
        console.log(this.commodityAny);
      })
    }
  },
  mounted () {
    this.getCommodity();
    this.GetMerchants();
    this.GetAnySkuValue();
    this.GetAnySku();

  }
};
</script>

<style scoped>
.el-card {
  height: 450px !important;
}

.el-header {
  height: 170px !important;
}
.el-header {
  background-color: antiquewhite;
}
.el-main {
  background-color: rgb(245, 248, 247);
  height: auto;
}

.img2 {
  height: 300px;
  height: 300px;
  margin-left: 130px;
}
.title {
  margin-left: 650px;
  margin-top: -250px;
}
.price {
  /* position: absolute; */
  margin-left: 650px;
}
.yprice {
  /* position: absolute; */
  margin-left: 650px;
}
.inventory {
  /* position: absolute; */
  margin-left: 650px;
}

.btn1 {
  position: absolute;
  left: 50%;
}
.btn2 {
  position: absolute;
  left: 60%;
}
.car {
  position: absolute;
  left: 75%;
}
.img {
  /* position: absolute; */
  width: 100px;
  height: 100px;
  top: 55px;
}
.input_search {
  width: 320px;
  /* position: absolute; */
  left: 40%;
  top: 9%;
}

.select {
  /* position: absolute; */
  margin-left: 750px;
  top: -50px;
}
.buynum {
  /* position: absolute; */
}
.el-input-number {
  width: 180px !important;
}
.buy {
  width: 150px;
  /* position: absolute; */
  margin-left: -150px;
}
.intocar {
  width: 150px;
  /* position: absolute; */
  left: 55%;
  top: 55%;
}
.details {
  /* position: absolute;   */
  top: 60%;
}
.detail1 {
  text-align: center;
  margin-top: 0;
}
.tab {
  margin-top: 20px;
}
</style>